<template>
  <div class="project-team">
    <el-card>
      <div slot="header">
        <h4>{{'团队 / 总数：' + tableData.length}}</h4>
      </div>
      <vxe-grid ref="xGrid" v-bind="gridOptions">
        <template v-slot:toolbar-buttons>
          <vxe-button status="success" size="mini" @click="modalVisible = !modalVisible">
            <i class="el-icon-plus"/> 新需求
          </vxe-button>
        </template>
      </vxe-grid>
    </el-card>
    <!-- 弹窗-新增需求 -->
    <needs-add :visible.sync="modalVisible" :projectId="$route.params.id"></needs-add>
  </div>
</template>

<script>
import NeedsAdd from './NeedsAdd';
import { formatDateString } from '@/utils/date';
import projectTeamApi from '@/api/projectTeamApi';
import { mapGetters } from 'vuex';
export default {
  components: {
    NeedsAdd
  },
  computed: {
    ...mapGetters(['dictionary'])
  },
  data () {
    return {
      tableData: [],
      modalVisible: false,
      gridOptions: {
        border: true,
        resizable: true,
        showHeaderOverflow: true,
        showOverflow: true,
        highlightHoverRow: true,
        keepSource: true,
        height: 600,
        rowId: 'id',
        customConfig: {
          storage: true
        },
        sortConfig: {
          trigger: 'cell'
        },
        toolbar: {
          slots: {
            buttons: 'toolbar-buttons'
          }
        },
        columns: [
          {
            field: 'Level',
            title: '级别',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'Name',
            title: '名称',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'UserId',
            title: '创建人',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'Acceptid',
            title: '指派人',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'Tasktime',
            title: '预计工时',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'Created',
            title: '创建日期',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'Status',
            title: '状态',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            field: 'Stage',
            title: '阶段',
            sortable: true,
            align: 'center',
            resizable: false
          },
          {
            title: '操作',
            align: 'center',
            resizable: false
          }
        ]
      }
    }
  },
  created () {
    this.getDataList();
  },
  methods: {
    getDataList () {
      const params = {
        p: 1,
        pageOffset: 15,
        id: this.$route.params.id
      }
      projectTeamApi.getPage(params).then(({ Teams }) => {
        if (Teams) {
          this.tableData = Teams;
        }
      });
    }
  },
  filters: {
    formatDateTime (val) {
      return formatDateString(val * 1000, 'yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.link-name {
  color: #65CEA7;
}

.link-name:hover {
  color: #353F4F;
  text-decoration: underline;
}
</style>
